<%@ page language="java" pageEncoding="utf-8"%>
<%@ page import="java.util.List"%>
<%@ page import="com.wc.test.bean.User"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page isELIgnored="false"%>

<html>
<head>
<meta charset="utf-8">
<title>用户信息列表</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/statics/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/statics/css/reveal.css" />
<script
	src="${pageContext.request.contextPath}/statics/js/jquery.min.js"
	type="text/javascript" charset=utf-8></script>
<script
	src="${pageContext.request.contextPath}/statics/js/bootstrap.min.js"
	type="text/javascript" charset=utf-8></script>
<script type="text/javascript">


$(function() {
	var t = setInterval(dataTime, 1000); 
})

function removeUser(id) {
	//弹出对话框
	var result = confirm("是否刪除？")
	if (result) {
		//重定位网页，url请求
		window.location = "removeUser.action?id=" + id;
	}
}
function add(){
	
	$('#form').attr("action", "addUser.action")
	$("input[name='username']").val("")
	$("input[name='password']").val("")
	$("input[type='submit']").val("添加")
	$('#myModalLabel').text("添加用户信息")
	$('.ID_text').hide()
	$('#checkName_text').show()
	
	$("input[name='username']").attr('type','text').blur(function(){
		//alert("dsa")
		$.ajax({
			type : "get",
			url : "getUserName.action",
			data : "registerUsername=" + $("input[name='username']").val(),
			success : function(data) {
				var result = eval("("+data+")");
				if(result != null){
					$('#checkName_text').text("用户名已经存在，不可重复添加").css("color","red")
					//设置按钮不可用
					$("input[type='submit']").attr('disabled',"disabled")
					return false
				}else{
					$('#checkName_text').text("该用户名可以添加").css("color","green")
					$("input[type='submit']").removeAttr('disabled')
					return true
				}
			}
		});
	})
	
}
function update(id) {
	
	var result = ""
	
	$('#form').attr("action", "updateUser.action")
	$("input[type='submit']").val("修改")
	$('#myModalLabel').text("修改用户信息")
	$('.ID_text').hide()
	$('#checkName_text').hide()
	
	$.ajax({
		type : "get",
		url : "getUser.action",
		data : "id=" + id,
		success : function(data) {
			result = eval("("+data+")");
			//alert("dsad"+result.username)
			//对编辑页面的原始数据赋值
			$("input[name='id']").val(result.id);
			$("input[name='username']").val(result.username);
			$("input[name='password']").val(result.password);
			return true
		}
	});
		
} 

//时间方法
function dataTime(){
	var myDate = new Date;
	var year = myDate.getFullYear();//获取当前年
	var month = myDate.getMonth() + 1;//获取当前月
	var date = myDate.getDate();//获取当前日
	var hours = myDate.getHours();//获取当前小时数(0-23)
	var min = myDate.getMinutes();//获取当前分钟数(0-59)
	var s = myDate.getSeconds();//获取当前秒
	month = (month < 10)?"0" + month:month;
	date = (date < 10)?"0" + date:date;
	hours = (hours < 10)?"0" + hours:hours;
	min = (min < 10)?"0" + min:min;
	s = (s < 10)?"0" + s:s;
	$('#time').text(year + "年" + month + "月" + date + "日  " + hours
					+ ":" + min + ":" + s)
				
}
/* function checkForm(){
	var name = $("input[name='username']").val()
	var pwd = $("input[name='password']").val()
	if(name == "" || pwd == ""){
		alert("填写不完整")
		return false
	}
	return true
} */
function next(pageIndex,totalPageCount) {
	//alert(totalPageCount)
	pageIndex++
	if(pageIndex > totalPageCount){
		$('#next').attr('disabled',"disabled")
		$('#next').css("cursor", "not-allowed")
		return false
	}
	window.location = "userList.action?page=" + pageIndex;
	return true
	
}
function pert(pageIndex,totalPageCount) {
	pageIndex--
	if(pageIndex <= 0){
		$('#pert').attr('disabled',"disabled")
		$('#pert').css("cursor", "not-allowed")
		return false
	}
	window.location = "userList.action?page=" + pageIndex;
	return true
}
function goutUser() {
	var result = confirm("是否退出系统？")
	if (result) {
		//重定位网页，url请求
		window.location = "goutUser.action";
	}
}


</script>

</head>
<body>
	<div class="container">
		
		<div class="row">
			<div class="col-md-2">
				<span>欢迎用户${user.username}</span>
				<a href="javascript:goutUser()" type="button" class="btn btn-danger btn-xs">退出</a>
			</div>
			<div class="col-md-4">
				<span>当前系统时间：</span><span id="time"></span>
			</div>
			<div class="col-md-4">
				<form class="navbar-form" role="search"
					action="userList.action?userName=&page=1">
					<input type="hidden" name="page" value="1">
					<div class="form-group">
						<input type="text" class="form-control" name="userName" placeholder="用户名">
					</div>
					<button type="submit" class="btn btn-default btn-success">查询</button>
				</form>
			</div>
			<div class="col-md-2">
				<a class="btn btn-info" href="#modal-container" data-toggle="modal"
					onclick="return add()">添加用户</a>
			</div>
		</div>
		<table class="table table-bordered">
			<thead>
				<tr>
					<th>ID</th>
					<th>用户名称</th>
					<th>用户密码</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<c:if test="${userList != null}">
					<c:forEach items="${userList}" var="u">
						<tr>
							<td>${u.getId()}</td>
							<td>${u.getUsername()}</td>
							<td>${u.getPassword()}</td>
							<td><a class="btn btn-xs btn-info active"
								data-toggle="modal" onclick="return update(${u.getId()})"
								href="#modal-container">修改</a> <a
								class="btn btn-xs btn-danger active"
								href="javascript:removeUser(${u.getId()})">删除</a></td>
						</tr>
					</c:forEach>
				</c:if>
				<c:if test="${userList == null}">
					<tr>
						<td>查询不到数据</td>
					</tr>
				</c:if>
			</tbody>
		</table>
		<div class="footer">
			<ul class="pagination pagination-sm">
				<li><a id="pert"
					onclick="return pert(${pageIndex},${totalPageCount})">上一页</a></li>
				<c:forEach items="${pageArray}" varStatus="index">
					<c:if test="${currentPageNo == index.index+1}">
						<li><a style="background: #5bc0de; color: #fff">${index.index+1}</a>
						</li>
					</c:if>
					<c:if test="${currentPageNo != index.index+1}">
						<li><a href="userList.action?page=${index.index+1}">${index.index+1}</a></li>
					</c:if>
				</c:forEach>
				<li><a id="next"
					onclick="return next(${pageIndex},${totalPageCount})">下一页</a></li>
			</ul>
		</div>
	</div>

	<div class="modal fade" id="modal-container" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
		style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">标题</h4>
				</div>
				<div class="modal-body">
					<!-- 内容区 -->
					<form role="form" class="form-horizontal" id="form" action="#"
						method="post" onsubmit="return checkForm()">
						<div class="form-group ID_text">
							<label for="id" class="col-sm-2 control-label">ID</label>
							<div class="col-sm-10">
								<input type="hidden" class="form-control" name="id" value=""
									id="id" placeholder="ID值">
							</div>
						</div>
						<div class="form-group">
							<label for="username" class="col-sm-2 control-label">用户名</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="username"
									placeholder="用户名" value="" name="username">
									<span id="checkName_text"></span><span id="msg"></span>
							</div>
						</div>
						<div class="form-group">
							<label for="password" class="col-sm-2 control-label">密码</label>
							<div class="col-sm-10">
								<input type="text" id="password" class="form-control"
									placeholder="密码" value="" name="password">
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-2 col-sm-10">
								<input type="submit" class="btn btn-success btn-sm" value=""></input>
							</div>
						</div>
						${msg }
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

